<template>
	<view class="article-item" @click="openarticle">
		<view class="u-line-1 u-font-32 article-name">
			{{item.title}}
		</view>
		<view class="detail">
			<image class="picture" :src="item.avatar+'?x-oss-process=image/resize,m_fill,h_150,w_240'"
				mode="aspectFill"></image>
			<view class="article-desc">
				<view class="u-line-3 u-font-20 desc">
					{{item.excerpt}}
				</view>
				<view class="foot-info">
					<u-icon name="clock" color="#C5C5C5" label-color="#C5C5C5" size="28" label-size="28"
						:label="item._add_time_str.substr(0,10)"></u-icon>
			
					<u-icon name="eye" color="#C5C5C5" label-color="#C5C5C5" size="28" label-size="28"
						:label="item.view_count+'次浏览'" :custom-style="{marginLeft:'20rpx'}"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pay-article-item",
		props: ['item'],
		data() {
			return {

			};
		},
		methods: {
			openarticle() {
				uni.vk.navigateTo('/uni_modules/uce-pay-article/pages/detail?id=' + this.item._id, false);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-item {
		position: relative;
		overflow: hidden;
		margin: 0 auto;
		height: 252rpx;
		width: 696rpx;
		border-bottom: 2px solid #f5f5f5;
		padding: 20rpx 0;

		.article-name {
			width: 100%;
			font-weight: bold;
			color: #303030;
		}

		.detail {
			display: flex;
			width: 100%;
			position: relative;
			overflow: hidden;
			margin-top: 15rpx;

			.picture {
				width: 240rpx;
				height: 150rpx;
			}

			.article-desc {
				position: relative;
				flex: 1;
				padding-left: 15rpx;

				.desc {
					font-size: 28rpx;
					line-height: 38rpx;
					text-indent: 48rpx;
					// font-weight: bold;
					color: #C5C5C5;
					min-height: 114rpx;
				}

				.foot-info {
					height: 30rpx;
				}
			}
		}
	}
</style>
